<template>
	<view class="page">
		<!-- 头部 -->
		<view class="head">
			<view class="lf">
				<image src="../../static/gaoxiao1.png" mode=""></image>
			</view>
			<view class="rt">
				<view class="name-address">
					<view class="name">
						北京大学
					</view>
					<view class="address">
						<text class="iconfont icondingwei"></text>
						北京朝阳区
					</view>
				</view>
				<view class="tags">
					<view class="tag">
						普通本科
					</view>
					<view class="tag">
						理工类
					</view>
					<view class="tag">
						公办
					</view>
					<view class="tag">
						普通类
					</view>
					<view class="tag">
						艺术类
					</view>
					<view class="tag">
						政审类
					</view>
				</view>
				<view class="p">
					<image src="../../static/colleges-icon-1.png" mode=""></image>
					官网网址：http://zs.cqupt.edu.cn/
				</view>
				<view class="p">
					<image src="../../static/colleges-icon-2.png" mode=""></image>
					官方电话：023-62468661,023-62468662
				</view>
				<view class="p">
					<image src="../../static/colleges-icon-3.png" mode=""></image>
					电子邮箱：cqzb@cqupt.edu.cn
				</view>
			</view>
		</view>
		<!-- tab -->
		<view class="tab-wrap">
			<view @click.stop="tabChange(index)" class="tab-item" :class="tabCurrent == index ? 'on' : ''" v-for="(item,index) in tabData"
			 :key="index">{{item.name}}</view>
		</view>
		<!-- 内容 -->
		<!-- 院校介绍 -->
		<view v-if="tabCurrent == 0" class="cont-wrap-a">
			<view class="description-wrap">
				<view class="description" :style="descriptionMore ? 'height: auto' : 'height: 400rpx'">
					从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 800 个以上。定位于中台业务的 Ant Design
					兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。从 2015 年 4 月起，Ant Design
					在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 800 个以上。定位于中台业务的 Ant Design
					兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。从 2015 年 4 月起，Ant Design
					在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 800 个以上。定位于中台业务的 Ant Design
					兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。
				</view>
				<view @click.stop="descriptionToggle" url="" class="view-more" hover-class="none">查看更多</view>
			</view>
			<!-- 基本信息 -->
			<view class="basic-info">
				<view class="title">
					基本信息
				</view>
				<view class="statistics">
					<view class="item">
						<view class="num">
							6
						</view>
						<view class="text">
							博士点
						</view>
					</view>
					<view class="item">
						<view class="num">
							22
						</view>
						<view class="text">
							国家重点学科
						</view>
					</view>
					<view class="item">
						<view class="num">
							12
						</view>
						<view class="text">
							硕士点
						</view>
					</view>
					<view class="item">
						<view class="num">
							10
						</view>
						<view class="text">
							重点实验室
						</view>
					</view>
					<view class="item">
						<view class="num">
							2
						</view>
						<view class="text">
							院士
						</view>
					</view>
					<view class="item">
						<view class="num">
							8
						</view>
						<view class="text">
							国家特色专业
						</view>
					</view>
				</view>
				<view class="info">
					<view class="row">
						<image class="icon" src="../../static/colleges-icon-4.png" mode=""></image>
						<text class="md">创办时间</text>
						<text class="rt">1950</text>
					</view>
					<view class="row">
						<image class="icon" src="../../static/colleges-icon-5.png" mode=""></image>
						<text class="md">占地面积</text>
						<text class="rt">3800亩</text>
					</view>
					<view class="row">
						<image class="icon" src="../../static/colleges-icon-6.png" mode=""></image>
						<text class="md">归属地</text>
						<text class="rt">归属地</text>
					</view>
					<view class="row">
						<image class="icon" src="../../static/colleges-icon-7.png" mode=""></image>
						<text class="md">学校地址</text>
						<text class="rt">重庆市南岸区南山街道崇文路2号</text>
					</view>
				</view>
			</view>

			<view class="article">
				<view class="title">
					基本信息
					<navigator class="more" url="" hover-class="none">更多</navigator>
				</view>
				<view class="text">
					从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 800 个以上。定位于中台业务的 Ant Design
					兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。从 2015 年 4 月起，Ant Design
					在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 800 个以上。定位于中台业务的 Ant Design
					兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。从 2015 年 4 月起，Ant Design
					在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 800 个以上。定位于中台业务的 Ant Design
					兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。
				</view>
			</view>

			<!-- 轮播图 -->
			<view class="swiper-wrap">
				<view class="title">
					校园风光
					<navigator class="more" url="" hover-class="none">更多</navigator>
				</view>
				
				<uni-swiper-dot :info="campusScenery" :current="current" field="title" mode="nav" >
					<swiper class="swiper-box" @change="change">
						<swiper-item v-for="(item ,index) in campusScenery" :key="index">
								<image :src="item.images" class="swiper-item"></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
		</view>

		<!-- 开设专业 -->
		<view v-if="tabCurrent == 1" class="cont-wrap-b">
			<view class="title">
				开设专业
			</view>
			<view class="row">
				<view class="lf">
					国家重点学科
				</view>
				<view class="rt">
					软件工程 通信工程 计算机科学与技术 自动化 微电子学
				</view>
			</view>
			<view class="row">
				<view class="lf">
					国家特色专业
				</view>
				<view class="rt">
					软件工程 通信工程 计算机科学与技术 自动化 微电子学
				</view>
			</view>
			<!-- 表格 -->
			<view class="table-wrap">
				<view class="th">
					<view class="td">
						类别
					</view>
					<view class="td">
						专业名称
					</view>
					<view class="td">
						办学地点
					</view>
					<view class="td">
						学制年限
					</view>
					<view class="td">
						备注
					</view>
				</view>
				<view class="tr">
					<view class="td">
						经济学类
					</view>
					<view class="td">
						经济学
						<view class="tags">
							<view class="tag">
								重点学科
							</view>
							<view class="tag">
								重点学科
							</view>
						</view>
					</view>
					<view class="td">
						重庆
					</view>
					<view class="td">
						4
					</view>
					<view class="td">
						-
					</view>
				</view>

				<view class="tr">
					<view class="td">
						经济学类
					</view>
					<view class="td">
						经济学
					</view>
					<view class="td">
						重庆
					</view>
					<view class="td">
						4
					</view>
					<view class="td">
						-
					</view>
				</view>
			</view>
		</view>

		<!-- 招生章程 -->
		<view v-if="tabCurrent == 2" class="cont-wrap-c">
			<scroll-view scroll-y="true" class="scroll-Y list-wrap" @scrolltolower="enrollmentLower" :style="{height:scrollH+'rpx'}">
				<view class="title">
					招生章程
				</view>
				<navigator v-for="(index,item) in 10" :key="index" url="" hover-class="none" class="item">
					<view class="lf">
						<view class="big-num">
							10
						</view>
						<view class="date">
							2020/12
						</view>
					</view>
					<view class="rt">
						<view class="title">
							2021年高考最新动向是假的？
						</view>
						<view class="cont">
							从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 800 个以上。定位于中台业务的 Ant Design 兼顾专业和非专业的设计人… </view>
					</view>
				</navigator>
			</scroll-view>
		</view>

		<!-- 招生计划 -->
		<view v-if="tabCurrent == 3" class="cont-wrap-d">
			<scroll-view scroll-y="true" class="scroll-Y list-wrap" @scrolltolower="planLower" :style="{height:scrollH+'rpx'}">
				<view class="title">
					招生计划
					<view class="dingwei">
						<text class="iconfont icondingwei"></text>
						根据高考省份来显示
					</view>
				</view>
				<view class="select-wrap">
					<view class="select" style="100rpx">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view style="100rpx" class="uni-input">{{array[index]}}</view>
							<view class="iconfont iconxxjtfull"></view>
						</picker>
					</view>
					<view class="select">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
							<view class="iconfont iconxxjtfull"></view>
						</picker>
					</view>
					<view class="select">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
							<view class="iconfont iconxxjtfull"></view>
						</picker>
					</view>
				</view>
				<view class="table-wrap">
					<view class="th">
						<view class="td">
							专业名称
						</view>
						<view class="td">
							专业备注
						</view>
						<view class="td">
							选科要求
						</view>
						<view class="td">
							招生计划
						</view>
					</view>
					<view class="tr" v-for="(item,index) in 10" :key="index">
						<view class="td">
							数字媒体艺术设计
							<view class="tags">
								<view class="tag">
									重点学科
								</view>
								<view class="tag">
									重点学科
								</view>
							</view>
						</view>
						<view class="td">
							专业备注
						</view>
						<view class="td">
							动画影视
						</view>
						<view class="td">
							424
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 历年录取结果 -->
		<view v-if="tabCurrent == 4" class="cont-wrap-e">
			<scroll-view scroll-y="true" class="scroll-Y list-wrap" @scrolltolower="planLower" :style="{height:scrollH+'rpx'}">
				<!-- 专业历年录取结果 -->
				<view class="title">
					专业历年录取结果
					<view class="dingwei">
						<text class="iconfont icondingwei"></text>
						根据高考省份来显示
					</view>
				</view>
				<view class="select-wrap">
					<view class="select">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
							<view class="iconfont iconxxjtfull"></view>
						</picker>
					</view>
					<view class="select">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
							<view class="iconfont iconxxjtfull"></view>
						</picker>
					</view>
				</view>
				<view class="table-wrap" style="border-bottom: solid 20rpx #f9f9f9;">
					<view class="th">
						<view class="td">
							专业名称
						</view>
						<view class="td">
							专业备注
						</view>
						<view class="td">
							最低分/
							最低位次
						</view>
						<view class="td">
							录取批次
						</view>
					</view>
					<view class="tr" v-for="(item,index) in 10" :key="index">
						<view class="td">
							数字媒体艺术设计
							<view class="tags">
								<view class="tag">
									重点学科
								</view>
								<view class="tag">
									重点学科
								</view>
							</view>
						</view>
						<view class="td">
							专业备注
						</view>
						<view class="td">
							动画影视
						</view>
						<view class="td">
							424
						</view>
					</view>
				</view>
				
				<!-- 高校历年分数线 -->
				<view class="title">
					高校历年分数线
					<view class="dingwei">
						<text class="iconfont icondingwei"></text>
						根据高考省份来显示
					</view>
				</view>
				<view class="select-wrap">
					<view class="select">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
							<view class="iconfont iconxxjtfull"></view>
						</picker>
					</view>
					<view class="select">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
							<view class="iconfont iconxxjtfull"></view>
						</picker>
					</view>
				</view>
				<view class="table-wrap">
					<view class="th">
						<view class="td">
							专业名称
						</view>
						<view class="td">
							专业备注
						</view>
						<view class="td">
							最低分/
							最低位次
						</view>
						<view class="td">
							录取批次
						</view>
					</view>
					<view class="tr" v-for="(item,index) in 10" :key="index">
						<view class="td">
							数字媒体艺术设计
							<view class="tags">
								<view class="tag">
									重点学科
								</view>
								<view class="tag">
									重点学科
								</view>
							</view>
						</view>
						<view class="td">
							专业备注
						</view>
						<view class="td">
							动画影视
						</view>
						<view class="td">
							424
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 右侧悬浮按钮 -->
		<view class="btn-fixed" @click.stop="collegesContrast">
			<view class="text">
				院校对比
			</view>
		</view>
		<!-- 底部菜单 -->
		<view class="bottom-nav">
			<view class="lf">
				<image v-if="collect" class="icon" src="../../static/colleges-sc-full.png" mode=""></image>
				<image v-else class="icon" src="../../static/colleges-sc.png" mode=""></image>
				<view class="text">
					收藏
				</view>
			</view>
			<view class="rt">
				<navigator class="btn-1" url="../zhaoshengjihua/zhaoshengjihua" hover-class="none">招生计划</navigator>
				<navigator class="btn-2" url="../linianluqu/linianluqu" hover-class="none">历年录取结果</navigator>
			</view>
		</view>

	</view>
</template>

<script>
	import uniSwiperDot from "@/components/uni-ui/uni-swiper-dot/uni-swiper-dot.vue";
	export default {
		components: {
			uniSwiperDot
		},
		data() {
			return {
				collect: false, //是否收藏
				tabData: [{
						name: '院校介绍'
					},
					{
						name: '开设专业'
					},
					{
						name: '招生章程'
					},
					{
						name: '招生计划'
					},
					{
						name: '历年录取结果'
					}
				],
				tabCurrent: 0, //tab
				descriptionMore: false, //校园简介更多
				// 校园风光轮播图
				campusScenerCcurrent: 1,
				current: 0,
				campusScenery: [{
						images: 'http://placehold.it/710x414',
						title: '我是标题1'
					},
					{
						images: 'http://placehold.it/710x414',
						title: '我是标题2'
					},
					{
						images: 'http://placehold.it/710x414',
						title: '我是标题3'
					}
				],
				index: 0,
				array: ['理科', '2020', '本科批', '专科批'],
			}
		},
		computed: {
			scrollH: function() {
				let sys = uni.getSystemInfoSync();
				let winWidth = sys.windowWidth;
				let winrate = 750 / winWidth;
				let winHeight = parseInt(sys.windowHeight * winrate - 200)
				return winHeight
			}
		},
		methods: {
			// 院校对比跳转
			collegesContrast(){
				uni.navigateTo({
					url: '../collegesContrastList/collegesContrastList',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// tab切换
			tabChange(index) {
				let that = this;
				that.tabCurrent = index;
			},
			// 院校简介查看更多
			descriptionToggle() {
				let that = this;
				that.descriptionMore = !that.descriptionMore;
			},
			//校园风光轮播
			// campusSceneryChange(e) {
			// 	let that = this;
			// 	that.campusScenerCcurrent = e.detail.current + 1;
			// 	console.log(that.campusScenerCcurrent)
			// },
			change(e) {
			    this.current = e.detail.current;
			},
			//招生章程
			enrollmentLower() {
				console.log('招生章程底部')
			},
			// 招生计划
			planLower() {
				console.log('招生计划底部')
			},
			// 招生计划select
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import 'collegesDetail.scss';
	@import '@/common/icon/iconfont.css';
</style>
